<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import Arrow from './assets/layer/arrow.svg'
import Dw from './assets/layer/dw.svg'
import DwS from './assets/layer/dw-s.svg'
import Fxq from './assets/layer/fxq.svg'
import FxqS from './assets/layer/fxq-s.svg'
import Hl from './assets/layer/hl.svg'
import HlS from './assets/layer/hl-s.svg'
import Ky from './assets/layer/ky.svg'
import KyS from './assets/layer/ky-s.svg'
import Lw from './assets/layer/lw.svg'
import LwS from './assets/layer/lw-s.svg'
import Qjd from './assets/layer/qjd.svg'
import QjdS from './assets/layer/qjd-s.svg'
import Sy from './assets/layer/sy.svg'
import SyS from './assets/layer/sy-s.svg'
import Xzqh from './assets/layer/xzqh.svg'
import XzqhS from './assets/layer/xzqh-s.svg'
import Zcsb from './assets/layer/zcsb.svg'
import ZcsbS from './assets/layer/zcsb-s.svg'
import { useRoute } from 'vue-router';


interface Data {
  // 图标
  icon: string;
  // 选中图标
  selectIcon: string
  // 标识
  name: string;
  // id
  id: string;
}

const data = computed<Data[]>(() => {
  const data = [
    { icon: Xzqh, selectIcon: XzqhS, name: '行政区划', id: 'xzqh' },
    { icon: Lw, selectIcon: LwS, name: '路网', id: 'lw' },
    { icon: Sy, selectIcon: SyS, name: '水域', id: 'sy' },
    { icon: Qjd, selectIcon: QjdS, name: '起降点', id: 'qjd' },
    { icon: Zcsb, selectIcon: ZcsbS, name: '侦测设备', id: 'zcsb' },
    { icon: Dw, selectIcon: DwS, name: '定位', id: 'dw' },
    { icon: Ky, selectIcon: KyS, name: '空域', id: 'ky' },
    { icon: Hl, selectIcon: HlS, name: '航路', id: 'hl' },
  ]

  if(isEmptyDomain.value) {
    data.push({ icon: Fxq, selectIcon: FxqS, name: '飞行器', id: 'fxq' })
  }

  return data
});

const active = ref('xzqh');

// TODO: 点击图层
const handleClick = (item: Data) => {
  active.value = item.id;
};

// 折叠
const collapse = ref(true);

// 切换折叠
const toggleCollapse = () => {
  collapse.value = !collapse.value;
};

const showData = computed(() => {
  if (collapse.value) {
    return data.value.filter((item) => item.id === active.value);
  }
  return data.value;
})

const { leftOpen } = inject('c-aside') as any

// 是否为空域设施管理路由 /tools
const route = useRoute()
const isEmptyDomain = computed(() => {
  return route.path.endsWith('/monitor')
})
</script>

<template>
  <div :class="{layer:true, 'layer-close': leftOpen}">
    <div v-for="item in showData" :key="item.id" class="layer-item" @click="handleClick(item)">
      <img :src="item.id === active ? item.selectIcon : item.icon" alt="">
    </div>
    <div :class="{
      'layer-item': true,
      'layer-item-rotate': !collapse
    }" @click="toggleCollapse">
      <img :src="Arrow">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.layer {
  position: fixed;
  top: 195px;
  left: 500px;
  padding: 20px;
  z-index: 25;
  border-radius: 8px;
  background: linear-gradient(3deg, rgba(2, 53, 115, 0.6) 0%, rgba(2, 53, 115, 0.6) 27%, rgba(0, 132, 255, 0.8) 94%);
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: #FFFFFF;
  transition: all 0.3s ease-in-out;

  &-close {
    left: 70px;
  }

  &-item {
    height: 24px;
    margin-bottom: 8px;
    cursor: pointer;

   &:last-child {
      margin-bottom: 0;
    }

    img {
      width: 100%;
    }

    &-rotate {
      transform: rotate(180deg);
    }
  }
}
</style>
